<template>
  <div class="article-page-container">
    <header class="article-page-header">
      <Header></Header>
    </header>
    <main class="article-page-main">
      <section class="article-page-content">
        <article class="article-title">
          <div class="title-itme0">
            <h1>{{ articleData.title }}</h1>
            <span>
              <el-button type="warning" icon="el-icon-star-off" circle @click="collect"></el-button>
              <el-button type="danger" icon="el-icon-thumb" circle @click="like"></el-button>
            </span>
          </div>
          <div class="title-item1 title-item">
            作者：{{ articleData.author }}
            <el-divider direction="vertical"></el-divider>
            发表于：{{ articleData.created_time }}
          </div>
          <div class="title-item2 title-item">
            标签：<el-tag v-for="(item, index) in articleData.tag" :key="index" size="small" class="el_tag">{{ item.tag_name }}</el-tag>
          </div>
        </article>

        <div class="article-content">
          {{ articleData.content }}
        </div>

        <footer class="article-page-footer">
          <article class="article-about">
            作者：{{ articleData.author }}
            <el-divider direction="vertical"></el-divider>
            更新于：{{ articleData.last_modified_time }}
          </article>
          <article class="article-footer-tips">版权声明: 本博客所有文章除特别声明外,禁止用于商业用途。</article>
        </footer>
        <Comment class="article-comment" :id="article_id" :commentArea="articleData.commentArea"></Comment>
      </section>
    </main>
  </div>
</template>

<script>
import Header from '@/components/Header'
import Comment from '@/components/Comment'

export default {
  name: 'ArticlePage',
  props: ['article_id'],
  data () {
    return {
      articleData: {}
    }
  },
  methods: {
    async initArticle () {
      const id = this.article_id
      const res = await this.$api.queryArticle({
        parmas: id
      })
      // console.log(res)
      if (res.data.err_code === 0) {
        this.articleData = JSON.parse(res.data.data)
        this.articleData.created_time = this.$forMat(this.articleData.created_time)
        this.articleData.last_modified_time = this.$forMat(this.articleData.last_modified_time)

        // console.log(this.articleData)
      }
    },
    // collect收藏文章
    async collect () {
      var formData = {
        code: 0,
        userForm: {
          username: localStorage.getItem('username'),
          user_id: localStorage.getItem('_id')
        },
        articleForm: {
          article_title: this.articleData.title,
          article_id: this.articleData._id
        }
      }
      formData = JSON.stringify(formData)
      // console.log(formData)
      const res = await this.$api.collectOrLike({ formData })
      // console.log(res)
      if (res.data.err_code === 0) {
        this.$notify({
          title: '成功',
          message: res.data.message,
          type: 'success'
        })
      }
    },
    // like点赞文章
    async like () {
      var formData = {
        code: 1,
        userForm: {
          username: localStorage.getItem('username'),
          user_id: localStorage.getItem('_id')
        },
        articleForm: {
          article_title: this.articleData.title,
          article_id: this.articleData._id
        }
      }
      formData = JSON.stringify(formData)
      // console.log(formData)
      const res = await this.$api.collectOrLike({ formData })
      // console.log(res)
      if (res.data.err_code === 0) {
        this.$notify({
          title: '成功',
          message: res.data.message,
          type: 'success'
        })
      }
    }
  },
  created () {
    this.initArticle()
  },
  components: {
    Header,
    Comment
  }
}
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  // height: 100%;
}
.article-page-container {
  width: 100%;
  // height: 100%;
  background-image: -moz-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: -webkit-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
}
.article-page-main {
  display: flex;
  justify-content: center;
  // max-width: 1200px;
  width: 60%;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 50px 40px;
}
.article-page-content {
  width: 100%;
}
.article-page-footer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 40px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 50px 40px;
}
.article-title {
  font-size: 20px;
}
.title-item {
  margin: 15px 0;
}
.el_tag {
  margin-right: 5px;
}
.article-content {
  margin-top: 20px;
}
.article-comment {
  margin-top: 20px;
}
.title-itme0 {
  position: relative;
}
.title-itme0 h1 {
  display: inline-block;
  font-size: 25px;
}
.title-itme0 span {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
